<template>
    <div class="white-box">
        <title-more title="基本信息" />
        <div class="af-one">
            <el-image class="af-one__left" :src="proxy.imgUrl + objs.face + '!img_400'" fit="cover" v-if="objs.face" />
            <div class="af-one__right">
                <div class="af-one__item">
                    <detail-item title="微信昵称" one-value bottom="16px" :value="objs.nickname || '--'" value-color="#000" :value-weight="600" />
                    <detail-item title="佣金余额" one-value bottom="16px" :value="objs.award || '0'" value-color="#000" :value-weight="600" />
                    <detail-item
                        title="会员等级"
                        one-value
                        bottom="16px"
                        :value="objs.grade_id > 0 ? objs.user_grade.level_name : '--'"
                        value-color="#000"
                        :value-weight="600"
                    />
                    <detail-item
                        title="非区域代理"
                        one-value
                        bottom="0px"
                        :value="agent_levels[objs.agent_level - 1]"
                        value-color="#000"
                        :value-weight="600"
                        v-if="objs.is_agent == 1"
                    />
                </div>
                <div class="af-one__item">
                    <detail-item title="姓名" one-value bottom="16px" :value="objs.name || '--'" value-color="#000" :value-weight="600" />
                    <detail-item title="佣金总额" one-value bottom="16px" :value="objs.total_award || '--'" value-color="#000" :value-weight="600" />
                    <detail-item title="成长值" one-value bottom="16px" :value="objs.exp_point || '0'" value-color="#000" :value-weight="600" />
                    <detail-item
                        title="区域代理"
                        one-value
                        bottom="0px"
                        :value="partner_levels[objs.partner_level - 1]"
                        value-color="#000"
                        :value-weight="600"
                        v-if="objs.is_partner == 1"
                    />
                </div>
                <div class="af-one__item">
                    <detail-item title="手机号码" one-value bottom="16px" :value="objs.mobile" value-color="#000" :value-weight="600" />
                    <detail-item title="授信额度" one-value bottom="16px" :value="objs.credit || '0'" value-color="#000" :value-weight="600" />
                    <detail-item title="订单数" one-value bottom="0px" :value="objs.orders || '0'" value-color="#000" :value-weight="600" />
                </div>
                <div class="af-one__item">
                    <detail-item title="邀请人数" one-value bottom="16px" :value="objs.invite_num || '0'" value-color="#000" :value-weight="600" />
                    <detail-item title="总消费" one-value bottom="16px" :value="objs.total_pay || '0'" value-color="#000" :value-weight="600" />
                    <detail-item title="注册时间" one-value bottom="0px" :value="objs.created_at_label" value-color="#000" :value-weight="600" />
                </div>
            </div>
        </div>
    </div>
    <div class="white-box">
        <title-more title="订单详情" />
        <div class="table-head flexs">
            <div class="table-check">
                <!-- <el-checkbox v-model="allChecked" @change="changeAll" /> -->
            </div>
            <div class="table-good table-head-base">商品信息</div>
            <div class="table-buy-info table-head-base">收货人</div>
            <div class="table-price table-head-base">实付金额</div>
            <div class="table-oper table-head-base">操作</div>
        </div>
        <!-- 内容 -->
        <div class="table-body">
            <template v-if="arr_data.length > 0 && !loading">
                <div class="table-item" v-for="(item, index) in arr_data" :key="item.order_id">
                    <div class="table-item-head flexs">
                        <div class="table-item__head-left">
                            <div class="table-check" style="margin-right: 12px"></div>
                            <p class="item-head__text">订单编号：{{ item.order_sn }}</p>
                            <p class="item-head__text">下单时间：{{ item.created_at_label }}</p>
                            <p class="item-head__text">
                                会员关系：<span>{{ item.user_level_name || "--" }}</span>
                            </p>
                            <p class="item-head__text item-head__price">
                                预计佣金：<em style="font-size: 13px">￥</em><span>{{ item.number }}</span>
                            </p>
                        </div>
                        <div class="table-item__head-right"></div>
                    </div>
                    <div class="table-item-cont">
                        <div class="table-good table-head-base item-cont__base">
                            <div class="table-sub">
                                <div class="table-lr" v-for="sub in item.order.order_product" :key="sub.product_id">
                                    <div class="table-lr__right table-right-other">
                                        <p class="lr-user">
                                            {{ sub.product_name }}，
                                            <span>等级: {{ sub.level }}，数量: {{ sub.product_number }}{{ sub.unit }}，</span>
                                            <span><em>￥</em>{{ sub.product_price }}</span>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="table-buy-info table-head-base item-cont__base">
                            <div class="table-sub">
                                <p class="table-sub__p-mb">姓名：{{ item.contact }}</p>
                                <p class="table-sub__p-mb">电话：{{ item.mobile }}</p>
                            </div>
                        </div>
                        <div class="table-price table-head-base item-cont__base">
                            <div class="table-sub">
                                <p class="table-sub__p-mb">实付金额：<em style="font-size: 13px">￥</em>{{ item.amount }}</p>
                                <p class="table-sub__p-mb">
                                    支付方式：<span v-if="item.pay_code === 'credit'">授权额</span
                                    ><span v-else>{{ item.pay_code === "money" ? "余额" : "微信支付" }}</span>
                                </p>
                            </div>
                        </div>
                        <div class="table-oper table-head-base">
                            <div class="table-sub table-sub-btn">
                                <el-button link type="primary" class="theme-btn" @click="clickDetail(item)">查看详情</el-button>
                            </div>
                        </div>
                    </div>
                </div>
            </template>
            <div class="table-body__none" v-if="arr_data.length == 0 && !loading">暂无数据</div>
        </div>

        <!-- 分页 -->
        <el-pagination
            background
            v-model:current-page="page"
            v-model:page-size="pageSize"
            :page-sizes="pageSizeNum"
            :total="totalNums"
            layout="total, sizes, prev, pager, next, jumper"
        >
        </el-pagination>
    </div>
    <go-back />
</template>

<script setup>
import { getCurrentInstance, ref, onMounted, watch } from "vue"
import { useRouter, useRoute } from "vue-router"
import GoBack from "@components/GoBack.vue"
import OneLoad from "@mixins/one-load"
import TitleMore from "@components/title-more.vue"
import DetailItem from "@components/DetailItem.vue"

const router = useRouter()
const route = useRoute()
const { proxy } = getCurrentInstance()

let uid = route.query.uid
onMounted(() => {
    uid && getDetail()
})

const objs = ref({})
const agent_levels = ["一级", "二级", "三级"]
const partner_levels = ["省级", "市级", "区县级"]
function getDetail() {
    proxy.$axios
        .get("agent/finance", {
            params: {
                from: "detail",
                uid,
            },
        })
        .then((res) => {
            getList()
            if (res.data.code == 0) {
                let result = res.data.data
                objs.value = result
                console.log("result", result)
                getList()
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {})
}

/**
 * minxin列表加载
 */
const { page, pageSizeNum, pageSize, loading, arr_data, totalNums, pubParams, getdata } = OneLoad()
// 切换每页显示条数
watch(pageSize, (val) => {
    page.value = 1
    pageSize.value = val
    pubParams(getList)
})
// 跳转第几页
watch(page, (val) => {
    page.value = val
    pubParams(getList)
})
function getList() {
    let params = {
        page: page.value,
        limit: pageSize.value,
        from: "order",
        uid,
    }
    getdata("agent/finance", params)
}

const clickDetail = (row) => {
    router.push({
        path: "/Order/OrderDetail",
        query: {
            oid: row.order_id,
        },
    })
}
</script>
<script>
export default {
    name: "AgentFinanceChart",
}
</script>

<style lang="less" scoped>
.table-body__none {
    text-align: center;
    color: #909399;
    font-size: @font-size-md;
    line-height: 40px;
}
.table-right-other {
    min-height: 20px !important;
}
.table-sub__p-mb {
    margin-bottom: 2px;
}
.table-head {
    background-color: #f5f7fa;
    width: 100%;
    height: 50px;
    border-radius: @radius-sm;
    border: 1px solid #ebeef5;
    overflow: hidden;
    margin-bottom: @margin-sm;
    padding: 0px @padding-md;
}

.table-body {
    margin-bottom: @margin-xl;
    .table-item {
        border: 1px solid #ebeef5;
        margin-bottom: @margin-sm;
        .table-item-head {
            background-color: #f5f7fa;
            width: 100%;
            height: 46px;
            overflow: hidden;
            padding: 0px @padding-md;
            border-bottom: 1px solid #ebeef5;
            .table-item__head-left {
                display: flex;
                align-items: center;
                .item-head__sn {
                    font-size: @font-size-md;
                    font-weight: bold;
                    color: @gray-8;
                    margin-right: @margin-mdl;
                    flex: none;
                }
                .item-head__text {
                    font-size: @font-size-md;
                    color: @gray-8;
                    margin-right: @margin-mdl;
                    flex: none;
                    span {
                        color: @themes;
                    }
                }
                .item-head__price {
                    em,
                    span {
                        color: @red;
                    }
                }
            }
        }
        .table-item-cont {
            display: flex;
            & > div {
                padding: @padding-md @padding-xs;
                font-weight: 500;
                text-align: left;
                &:last-child {
                    text-align: left;
                    .el-button {
                        margin: 0 @margin-sm @margin-xs 0;
                    }
                }
            }
            .table-sub {
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: flex-start;
                overflow: hidden;
            }
            .table-sub-btn {
                flex-flow: row wrap;
                justify-content: flex-start;
                align-content: center;
            }
            .table-good {
                padding-left: @padding-md;
                padding-right: @padding-md;
                text-align: left;
            }
            .table-lr {
                margin-bottom: 0;
                &:last-child {
                    margin-bottom: 0;
                }
            }
            .item-cont__base {
                border-right: 1px solid #ebeef5;
            }
        }
    }
}

.table-check {
    flex: none;
    margin-right: @margin-base;
}

.table-good {
    flex: 1;
}

.table-price {
    width: 22%;
    flex: none;
    text-align: left;
}
.table-buy-info {
    width: 18%;
    flex: none;
    text-align: left;
}
.table-oper {
    width: 12%;
    flex: none;
}
.table-head-base {
    font-size: @font-size-md;
    font-weight: 700;
    color: @gray-8;
    padding: 0px @margin-xs;
}
:deep(.el-checkbox__inner) {
    width: 16px;
    height: 16px;

    &::after {
        width: 3px;
        height: 7px;
        left: 5px;
        top: 2px;
    }
}
.af-one {
    display: flex;
    align-items: flex-start;
    padding-bottom: @padding-sm;
    .af-one__left {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        overflow: hidden;
        flex: none;
    }
    .af-one__right {
        flex: 1;
        display: flex;
        align-items: flex-start;
        flex-flow: row wrap;
        .af-one__item {
            width: 25%;
            flex: none;
            border-right: 1px solid @gray-2;
            padding: 0px @padding-md;
            &:last-child {
                border-right: 0;
            }
        }
    }
}

:deep(.el-tabs) {
    .el-tabs__header {
        box-sizing: content-box;
    }
    .el-tabs__item {
        background: #f7f8fa;
        border-bottom: 1px solid #e4e7ed;
        &.is-active {
            color: #303133;
            background: #fff;
        }
    }
}
</style>
